<template>
  <div class="operation">
    <div class="operation-heder-t">
      <HeadTop :title="headTitle" :flag="true" v-on:routerChange="routerChange"></HeadTop>
      <div class="detail-form-tab">
        <div
        class="detail-form-tab-con"
        v-for="(item, index) in msg2" :key="index"
        :class="{'detail-tab-active': tabIdx2 === index + 1}"
        @click="detailTabChange(index + 1)"
        >
        {{item}}</div>
      </div>
    </div>
    <div class="operation-top-div"></div>
    <div class="operation-con-top">
      <div class="search-left" @click="show = true">
        <img src="../../../assets/icon-time.png" class="search-icon" />
        <section v-if="startDate">
          {{startDate}}<span class="search-left-tips">至</span>{{endDate}}
        </section>
        <section v-else>
          全部
        </section>
      </div>
    </div>
    <div class="operation-con">
      <div class="operation-add" @click="getAdd()">
        <img src="../../../assets/icon-add.png" class="operation-add-icon"/>
        添加
      </div>
      <!-- <van-cell title="选择日期区间" :value="date" @click="show = true" /> -->
      <van-calendar v-model="show" type="range" @confirm="onConfirm" :min-date="minDate" :max-date="maxDate"/>
      <section  v-if="tabIdx2 === 4">
        <div class="bios-title">鱼只数量</div>
        <div class="bios-title-list">
          <div class="bios-title-list-div" v-for="(item, index) in FishList" :class="{'bios-title-list-div-left':(index+1)%3 != 0}" :key="index">
            <div class="bios-title-list-div-number">{{item.num + item.measurement}}</div>
            <div>{{item.biologyName}}</div>
          </div>
        </div>
      </section>

      <div class="operation-title">历史报表</div>
      <DetailList
              :tabIdx="tabIdx"
              :pageSize="pageSize"
              :pageCount="pageCount"
              :dataType="dataType"
              v-on:showChange="showChange2"
              v-if="tabIdx2 === 1"
              v-on:pageChange="pageChange"
      ></DetailList>
      <FeedList
              :tabIdx="tabIdx"
              :pageSize="pageSize"
              :pageCount="pageCount"
              :dataType="dataType"
              v-on:showChange="showChange2"
              v-if="tabIdx2 == 2"
              v-on:pageChange="pageChange"
      ></FeedList>
      <OperationList
              :tabIdx="tabIdx"
              :pageSize="pageSize"
              :pageCount="pageCount"
              :dataType="dataType"
              v-on:showChange="showChange2"
              v-if="tabIdx2 == 3"
              v-on:pageChange="pageChange"
      ></OperationList>
      <biosList
              :tabIdx="tabIdx"
              :pageSize="pageSize"
              :pageCount="pageCount"
              :dataType="dataType"
              v-on:showChange="showChange2"
              v-if="tabIdx2 == 4"
              v-on:pageChange="pageChange"
      ></biosList>
    </div>

  </div>
</template>

<script >
import { geReport, getBiologyNumByFishTankId} from '../../../api/index.js'
import { getYYYYMMDD } from '../../../api/unit.js'
import DetailList from './components/detailList.vue'
import FeedList from './components/feedList.vue'
import OperationList from './components/operationList.vue'
import biosList from './components/biosList.vue'
import HeadTop from '../../../components/headTop.vue'
export default {
  data () {
    return {
      // flag: flag, // 控制是否跳到指定页面
      headTitle: '34号水草缸',
      tabIdx2: void 0,
      tabIdx: -1,
      msg2: ['巡查', '喂食', '操作', '生物'],
      fishTankId: 'a8e986eb-2d28-40cb-bdec-699c199d1e4c',
      page: 1,
      pageSize: 10,
      pageCount: 0,
      dataType: [],
      date: '',
      show: false,
      FishList: [],
      startDate: '',
      endDate: '',
      minDate: new Date(new Date() - 365 * 24 * 60 * 60 * 1000),
      maxDate: new Date()
    }
  },
  watch: {
    $route: {
      handler (val) {
        this.dataType = []
        this.page = 1
        // this.tabIdx2 = this.$route.query.index
        // debugger
        this.getData()
        // 深度监听，同时也可监听到param参数变化
      },
      deep: true
    }
  },
  methods: {
    async detailTabChange (index) {
      this.$router.push({path: '/home/opreationReport', query: {index: index}})
    },

    getUrl () {
      this.$router.go(-1)
    },
    getAdd () {
      if (this.tabIdx2 === 1) {
        this.$router.push({path: '/home/addDetail', query: {tabIdx2: this.tabIdx2}})
      }
      if (this.tabIdx2 === 2) {
        this.$router.push({path: '/home/addFeed', query: {tabIdx2: this.tabIdx2}})
      }
      if (this.tabIdx2 === 3) {
        this.$router.push({path: '/home/addOperation', query: {tabIdx2: this.tabIdx2}})
      }
      if (this.tabIdx2 === 4) {
        this.$router.push({path: '/home/addBiosList', query: {tabIdx2: this.tabIdx2}})
      }
    },
    async getData () {
      this.tabIdx2 = parseInt(this.$route.query.index)
      if (this.tabIdx2 === 4 && this.FishList !== []) {
        const data2 = await getBiologyNumByFishTankId('a8e986eb-2d28-40cb-bdec-699c199d1e4c')
        this.FishList = data2.data
      }
      const data = {
        fishTankId: this.fishTankId,
        reportTypeId: this.tabIdx2,
        page: this.page,
        pageSize: this.pageSize
      }
      // data = JSON.stringify(data)
      if (this.startDate !== '') {
        data.startDate = this.startDate
        data.endDate = this.endDate
      }
      const result = await geReport(data)

      this.pageCount = result.data.page.pageCount
      let dataType = this.dataType
      let msg = result.data.result
      msg.map(v => {
        if (this.tabIdx2 === 1) {
          let obj = [
            {
              name: '生物',
              msg: [v.biology1, v.biology2, v.biology3]
            },
            {
              name: '设备',
              msg: [v.equipment1, v.equipment2, v.equipment3, v.equipment4]
            }
          ]
          v.msg = obj
        }
        dataType.push(v)
      })

      this.dataType = dataType
    },
    pageChange (event) {
      this.page = ++this.page
      this.getData()
    },
    showChange2 (index) {
      if (this.tabIdx !== index) {
        this.tabIdx = index
      } else {
        this.tabIdx = -1
      }
    },
    formatDate (date) {
      return `${date.getMonth() + 1}/${date.getDate()}`
    },
    onConfirm (date) {
      const [start, end] = date
      this.show = false
      this.startDate = getYYYYMMDD(date[0]).nTime
      this.endDate = getYYYYMMDD(date[1]).nTime
      this.page = 1
      this.getData()
    },
    routerChange () {
      this.$router.push({path: '/home/detail'})
    }
  },
  mounted () {
    this.getData()

    // debugger
  },
  components: {
    DetailList,
    FeedList,
    OperationList,
    biosList,
    HeadTop
  }
}
</script>

<style scoped>
.operation{

}
.bios-title{
    font-size: 26px;

    font-weight: bold;
    margin-top: 24px;
    margin-bottom: 52px;
  }
  .bios-title-list{
    display: flex;
    flex-wrap: wrap;
  }
  .bios-title-list-div{
    width:208px;
    height:141px;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius:10px;
    display: flex;
    flex-direction: column;
    font-size: 28px;
    justify-content: center;
    align-items: center;
    color: #a0a0a0;
    margin-bottom: 23px;
  }
  .bios-title-list-div-left{
    margin-right: 33px;
  }
  .bios-title-list-r{
    margin-right: 34px;
  }
  .bios-title-list-div-number{
    color: #202020;
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 22px;
  }
.operation-heder-t{
  position: fixed;
  top: 0;
  left: 0;
  width: 750px;
  background: #fff;
}

.detail-form-tab{
  display: flex;
  justify-content: space-around;
  font-size: 28px;
  padding-bottom: 20px;
  width: 690px;
  margin-left: 30px;
}
.detail-form-tab-con{
  font-size: 28px;
  /* border:2px solid #ccc; */
  border-radius:30px;
  padding: 12px 24px;
  color: #8c8c8c;
  font-weight: normal;
}
.detail-tab-active{
  color: #fff;
  background:linear-gradient(35deg,rgba(0,186,255,1),rgba(11,155,238,1));
  font-weight: bold;
}
.operation-top-div{
  height: 180px;
 width: 750px;
}
.operation-con{
  min-height: 1300px;
  background: #ebebeb;
  padding: 30px 30px 30px;
}
.search-icon{
  width: 31px;
  height: 31px;
  /* margin-left: 36px; */
  margin-right: 19px;
}
.search-left-tips{
  font-size: 26px;
  color: #c3c3c3;
  padding: 0 29px;
}
.search-left{
  background:#fff;
  font-size: 28px;
  line-height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #202020;
  font-weight: bold;
  /* width: 750px; */
}
.operation-add{
  background:#fff;
  font-size: 32px;
  color: #202020;
  display: flex;
  align-items: center;
  width: 692px;
  height: 75px;
  justify-content: center;
  box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
.operation-add-icon{
  width: 35px;
  height: 35px;
  margin-right: 9px;
}
.operation-con-top{
  border-top: 5px solid #ebebeb;
  /* display: flex; */
}
.operation-title{
  color: #a0a0a0;
  font-size: 28px;
  margin-top: 51px;
}

</style>
